<template>
  <div id="main">
    <div class="banner"></div>
    <el-row id="hot_job" style="min-height:65px;margin-top:50px">
      <el-col :span="5">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <el-row>
            <Search></Search>
          </el-row>
          <el-row>
            <el-col :span="2">
              <div class="grid-content bg-purple" style="color: #9FA3B0;text-align:left;font-size:13px;">热门职位：</div>
            </el-col>
            <el-col :span="2">Java开发</el-col>
            <el-col :span="2">销售专员</el-col>
            <el-col :span="2">游戏特效</el-col>
            <el-col :span="2">数据挖掘</el-col>
            <el-col :span="2">产品经理</el-col>
            <el-col :span="2">项目专员</el-col>
            <el-col :span="2">产品运营</el-col>
            <el-col :span="2">外贸业务员</el-col>
            <el-col :span="2">算法工程师</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-main style="padding:20px 20px 0;">
      <el-row>
        <el-col :span="3">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="18">
          <HomeMenu></HomeMenu>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </el-main>
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="18">
        <HotJob></HotJob>
        <HotCompany></HotCompany>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <div class="weather_position">
      <Weather></Weather>
    </div>

  </div>
</template>

<script>
import Search from "../../components/common/Search";
import HomeMenu from "../../components/content/HomeMenu"
import HotJob from "@/components/content/HotJob";
import HotCompany from "@/components/content/HotCompany";
import Weather from "@/components/common/Weather";

export default {
  name: "Main",
  components: {
    Search,
    HomeMenu,
    HotJob,
    HotCompany,
    Weather,
  },
  data() {
    return {
    }
  },
}
</script>

<style scoped>
#main {
  position: relative;
}

.banner {
  height: 120px;
  background-image: url(../../assets/img/banner.png);
  background-repeat: no-repeat;
}

.grid-content {
  min-height: 50px;
  color: white;
  line-height: 50px;
  font-size: 14px;
}

#hot_job .grid-content {
  color: #428af5;
  font-size: 13px;
}

.weather_position {
  position: absolute;
  left: 30px;
  top: 20px;
}
</style>